<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				background-color: gray;
			}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			ul{
				width: 530px;
				display: flex;
				justify-content: space-between;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: pink;	
			}
			li{
				/* display: inline-block; */
				width: 100px;
				height: 10px;
				background-color: #fff;
			}
			
			li.active{
				width: 200px;
			}
			li::before{
				content: "";
				display: block;
				width: 0;
				background-color: #87ceeb;
				height: 100%;
			}
			li.active::before{
				width: 100%;
				transition: all 2.5s ease-in-out .5s;
			}
		</style>
	</head>
	<body>
		<ul>
			<li ></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
		
		
		<script type="text/javascript">
			// document.querySelector().addEventListener("",function(){
			// 	classlist
			// 	classname
			// 	getattribute
				
				
			// })
			window.addEventListener("load",function(){
				var lis = document.querySelectorAll("li");
				// var liact = document.querySelector(".avtive");
				
				var num = 0;
				var before_num = 0;
				lis[num].classList.add("active");
				var timer = setInterval(function(){
					// 给第一个元素减类名
					lis[num].classList.remove("active");
					
					(++num >= lis.length) && (num = 0)
					
					// 给后一个元素加类名
					lis[num].classList.add("active");
					
					// lis[num].classList.add("active");
					// if(num == lis.length-1){
					// 	num = 0;
					// }
					// num++;
					// getComputedStyle("active")
					// lis[num-1].classList.remove("active");
				},3500)
			})
			
			
		</script>
	</body>
</html>
